<template>
    <div>
      <my-head></my-head>
      <el-row style="height: 100px">
        <el-col style="width: 50%;margin-left: 5%;margin-top: 50px">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>搜索</el-breadcrumb-item>

          </el-breadcrumb>
        </el-col>

      </el-row>
      <div style="margin-left: 5%;background: #FAFAFA;width: 90%">
        <el-row>
          <el-autocomplete
            v-model="keyword"
            placeholder="请输入内容"
            text-color="#333333"
            :fetch-suggestions="querySearchAsync"
            active-text-color="#333333"
          >
            <i
              class="el-icon-search el-input__icon"
              slot="suffix"
              @click="serarch">
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
            </template>
          </el-autocomplete>
          价格区间
          <div style="width: 20%">
            <el-input v-model="startPrice" placeholder="起始价格"></el-input>
            -
            <el-input v-model="endPrice" placeholder="最高价格"></el-input>
          </div>
          价格排序
          <el-button class="el-icon-caret-bottom" @click="sort('desc')"></el-button>
          <el-button class="el-icon-caret-top" @click="sort('asc')"></el-button>
        </el-row>
        <el-row>
          <el-col style="margin-top: 8px" :span="5" v-for="(o, index) in course" :key="index" :offset="index > 0 ? 1 : 1">
            <el-card :body-style="{ padding: '1px' }">
              <img style="width: 280px;height: 150px" :src="o.coursePic" class="image">
              <div style="padding: 20px;">
                <span v-html="o.courseName"></span>
                <span v-html="o.pay"></span>
                <div class="bottom clearfix">
                  <time class="time">
                    <span v-html="o.courseDescription"></span> </time>
                  <el-button type="text" @click="coursedetail(o.id)" class="button">点击查看</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-pagination
          small
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :page-size="params.size"
          :current-page="params.page"
          :total="total">
        </el-pagination>
      </div>

      <my-footer></my-footer>
    </div>
</template>

<script>

    export default {
        name: "",
      data(){
          return{
            keyword: '123321',
            course:[
            ],
            total:'',
            params:{
              size:5,
              page:1,
            },
            value:'null',
            startPrice:0,
            endPrice:0
          }
      },
      methods:{
        loadAll() {
          return [
            { "value": "java"},
            { "value": "python"},
            { "value": "html"}
          ];
        },
        querySearchAsync(queryString, cb) {
          var restaurants = this.restaurants;
          var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

          clearTimeout(this.timeout);
          this.timeout = setTimeout(() => {
            cb(results);
          }, 3000 * Math.random());
        },
        serarch(key,keyPath) {
          this.key = key;

          if (this.keyword==""){
            this.keyword=null;
          }else if (key!=this.key) {
            this.params.page=1;
            this.params.size=5;
          }
          this.$axios.get("/qflive-portal/portal/search/"+this.keyword+"/"+this.params.page+"/"+this.params.size+"/"+this.value+"/"+this.startPrice+"/"+this.endPrice ).then(res=>{
              this.total=res.data.total;
              console.log(res.data.data)
              this.course=res.data.data;

          })
        },
        handleCurrentChange(val){
          this.params.page=val;
          this.serarch();
        },
        //coursedetail 跳转到课程详细页面
        coursedetail:function (id) {
          this.$router.push("/course/"+id);
        },
        sort:function (value) {
          console.log(value);
          this.value=value;
          this.serarch();
        }
      },
      mounted(){
         this.keyword= this.$route.params.keyword;
         this.serarch(this.keyword)
        this.restaurants = this.loadAll();
      },
      create(){



      },
      //字数控制在30字内
      filters: {
        ellipsis(value) {
          if (!value) return "";
          if (value.length > 15) {
            return value.slice(0, 20) + "...";
          }
          return value;
        }
      }
    }
</script>

<style scoped>

</style>
